<template>
    <div class="detail">
        <div class="f18 lh10 flex flex-jus-between">
            <div style="color:var(--el-color-primary)" class="flex">
                <el-icon class="m-r-5"><Switch /></el-icon>
                支出明细
            </div>
            <!-- 添加返回上一页图标 -->
            <el-button type="primary" @click="$router.go(-1)" class="m-l-5">
                <img src="@/assets/go-back.svg" class="go-back" />
                返回
            </el-button>
        </div>
        <el-card class="m-t-15" v-loading="tableStore.tableLoading">
            <el-form :model="tableStore.form" label-width="auto" style="max-width: 615px">
                <el-form-item label="起止日期：" class="m-b-12">
                    <el-date-picker
                        v-model="tableStore.form.date"
                        type="daterange"
                        unlink-panels
                        range-separator="至"
                        start-placeholder="开始时间"
                        end-placeholder="结束时间"
                        :clearable="false"
                        :shortcuts="dateShortcuts"
                        @change="resetSearch"
                    />
                </el-form-item>
                <el-form-item label="收支类型：" class="m-b-12">
                    <el-radio-group v-model="tableStore.form.operationType">
                        <el-radio-button 
                            v-for="item in operationTypeList" 
                            :key="item.id" 
                            :label="item.name" 
                            :value="item.id" 
                            @click="resetSearch"
                        />
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="金额(元)：" class="m-b-12">
                    <el-radio-group v-model="tableStore.form.amount">
                        <el-radio-button
                            v-for="item in amountList"
                            :key="item.id"
                            :label="item.label" 
                            :value="item.id" 
                            @click="resetSearch"
                         />
                        <el-radio-button label="自定义" :value="5" @click="dialogFormVisible = true" />
                    </el-radio-group>
                </el-form-item>
            </el-form>
            <div class="hr o5"></div>
            <Table 
                :select="true"
                :tableHeight="tableHeight"
            ></Table>
        </el-card>
        <el-dialog v-model="dialogFormVisible" title="" width="400" :before-close="dialogCancel">
            <el-form :model="tableStore.form" onsubmit="return false;">
            <el-form-item label="金额范围" :label-width="100">
                <el-input v-model.string="tableStore.form.customMoneyArea" autocomplete="off" placeholder="数据范围 : 0-5000000" />
            </el-form-item>
            </el-form>
            <template #footer>
            <div class="dialog-footer">
                <el-button @click="dialogCancel">取消</el-button>
                <el-button type="primary" @click="dialogSure">
                    确定
                </el-button>
            </div>
            </template>
        </el-dialog>
    </div>
</template>
<script setup lang="ts">
document.title = "支出明细";
import { ref,onMounted } from 'vue'
import { ElMessage } from 'element-plus'
import { Switch } from '@element-plus/icons-vue'
import Table from "@/components/Table.vue";
// 表格数据
import { useTableStore } from '@/stores/useTableStore';
const tableStore = useTableStore();

// 设置表格高度
import { adaptiveHeight } from '@/utils/func'
import { operationTypeList,dateShortcuts,amountList } from '@/utils/constant'
const tableHeight = ref(adaptiveHeight(440)) // 470

const dialogFormVisible = ref(false) // 输入金额弹窗状态

// 改变搜索条件自动搜索
const resetSearch = () => {
    tableStore.pagination.currentPage = 1
    onSubmit()
}
const onSubmit = () => {
    // 搜索数据
    setTimeout(()=>{
        tableStore.getTableList() // 保存表格数据
    },10)
}

// 弹窗点取消
function dialogCancel(){
    dialogFormVisible.value = false
    tableStore.form.customMoneyArea   = ""
    tableStore.form.amount  = 0 // 默认金额范围为全部
}
function dialogSure(){
    if(tableStore.form.customMoneyArea != ""){
        dialogFormVisible.value = false
        onSubmit()
    }else{
        ElMessage({
            message : '请输入金额范围',
            type    : 'warning',
            duration: 2 * 1000
        })
    }
}
onMounted(()=>{
    // 初始化搜索参数
    tableStore.pagination.currentPage = 1
    tableStore.pagination.pageSize = 20
    tableStore.form = {
        searchKey: '',    // 关键字
        date     : [new Date(Date.now() - 7 * 24 * 3600 * 1000),new Date()], // 时间范围      
        operationType: 0, // 收支类型
        amount   : 0,     // 支付金额范围
    }
    onSubmit() // 默认搜索一次
})
</script>
<style>
    .hr {
        width: 95%;
        height: 3px;
        margin: 20px auto;
        border:none;
        background-color: #dedede;
        border-radius: 10px;
    }
    .m-b-12 {
        margin-bottom: 12px
    }
    .w100 {
        width: 100px;
    }
    .go-back {
        display: block;
        width: 20px;
        position: relative;
        top:-1px;
        left:-5px;
    }
</style>
